<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
	  <meta http-equiv="cache-control" content="no-cache">
	  <meta http-equiv="expires" content="0">    
	  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	  <meta http-equiv="description" content="This is my page">
   
    <script src="/js/vue.min.js"></script>
    <script src="/js/httpVueLoader.js"></script><!-- 引入 http-vue-loader -->   
    <script type="text/javascript" src="/js/axios.min.js"></script>

    <link href="/css/front.css" rel="stylesheet">

    <style rel="stylesheet" type="text/css">
      .c1-bline{border-bottom:#999 1px dashed;border-top:1px;} 
      .f-right{float:right}
      .f-left{float:left}
      .clear{clear:both}
	</style>
    
</head>

<body>
<div id="app">
<my-header></my-header> 


<article> 
  <!--左侧-->
  <div class="lbox"> 
    
    
    <!-- 444 -->
    <div class="zhuanti whitebg" style="margin-top: 12px;">
      <!-- <h2 class="htitle"><span class="hnav"></span>新闻动态</h2> -->
      <div>
            <table border="0" width="100%" v-for="(liuyanban, index) in xianshilist" :key="liuyanban.id">
							   <tr style="height: 23px;"><td align="left" style="width: 70%">&nbsp;<img src="/img/head-mark4.gif" align="middle" class="img-vm" border="0"/>{{liuyanban.neirong}}</td><td align="right" style="width: 30%">{{liuyanban.liuyanshi}}</td></tr>
							   <tr style="height: 23px;"><td align="left" style="width: 70%">回复内容：{{liuyanban.huifu}}</td><td align="right" style="width: 30%"></td></tr>
							   <tr style="height: 23px;"><td align="left" style="width: 70%">回复时间：{{liuyanban.huifushi}}</td><td align="right" style="width: 30%"></td></tr>
							   <tr style="height: 23px;"><td align="left" style="width: 100%" colspan="2"><div style="border-bottom:#999 1px dashed;border-top:1px;">&nbsp;</div></td></tr>
            </table>

            <table width="98%" align="center" border="0" cellpadding="4" cellspacing="1" bgcolor="#F5F5F5" style="margin-bottom:8px">
						<tr bgcolor="#FFFFFF" style="height: 88px;">
						    <td width="103" bgcolor="#FFFFFF" align="right">
						          留言内容：
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
                                <textarea rows="4" cols="70" v-model="liuyanban.neirong"></textarea>
						    </td>
						</tr>
						<tr bgcolor="#FFFFFF" style="height: 48px;">
						    <td width="103" bgcolor="#FFFFFF" align="right">
						          留言时间：
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
						        <input type="text" v-model="liuyanban.liuyanshi" size="35" />
						    </td>
						</tr>
						<tr bgcolor="#FFFFFF" style="height: 38px;">
						    <td width="103" bgcolor="#FFFFFF" align="right">
						        &nbsp;
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
						       <input type="button" value="提交" @click="liuyanbanAdd()" class="lanse" style="width: 86px;"/>&nbsp; 
						    </td>
						</tr>
					 </table>
      </div>
    </div>
    <!-- 444 -->
    
    
    
    
    
    
    
    
    
  </div>
  <!--左侧-->
  
  
  
  
  
  
  
  
  <!--右侧-->
  <div class="rbox">
      <my-right></my-right>
  </div>
  <!--右侧-->
  
  
</article>



<my-foot></my-foot>



    
</div>


<script>
    new Vue({
        el: '#app',
        data: 
        {
          total:0,
          pageSize:64,
          currentPage:1,//当前页

          liuyanbanList:[],
          xianshilist: null,
                
          liuyanban:{
            id:"",
            user_id:"",
            neirong:"",
                    liuyanshi:"",
                    
                    huifu:"",
                    huifushi:"",
          },

            
		    },
        
        methods: 
        {
            getData()
            {
                    axios({
                  method: 'POST',
                  url: '/liuyanbanAll',
                  params:{
                    
                  }
                  }).then(data => {
                    if (data.data.state == 66)
                    {
                      this.liuyanbanList=data.data.data;
                      this.total=this.liuyanbanList.length;
                      
                                    this.xianshilist = this.liuyanbanList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
                    } 
                      
                  }).catch(error => {
                    alert(error);
                })
            },



          liuyanbanAdd()
          {
              var userJsonString = localStorage.getItem("user");
              if(userJsonString ==null)//判断是否登录
              {
                alert("请先登录");
                return false;
              }
              if(this.liuyanban.neirong =="")
              {
                alert("请输入留言内容");return false;
              } 
              
              this.add();
          },

          add()
          {
            axios({
                method: 'POST',
                url: '/liuyanbanAdd',
                data: this.liuyanban,
                /* params:{
                  username:this.liuyanban.userName,
                  password:this.liuyanban.userPw,
                } */
                }).then(data => {
                  if (data.data.state == 66)
                  {
                    alert("留言成功");
                    window.location.reload();
                  } 
                    
                  
                }).catch(error => {
                  alert(error);
                })
          },
                
                /* 获取系统时间 */
          padLeftZero (str)
          {
          return ('00' + str).substr(str.length);
          },

          formateDate(date, fmt)
          {
          if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
          }
          let o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
          }
          for (let k in o) {
          if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
          }
          }
          return fmt;
          },
          /* 获取系统时间 */


        },
        
        created()
        {
                this.getData();
                this.liuyanban.liuyanshi=this.formateDate(new Date(), 'yyyy-MM-dd hh:mm');

                var userJsonString = localStorage.getItem("user");
                if(userJsonString !=null)//判断是否登录
                {
                    var user=JSON.parse(userJsonString);
                    this.liuyanban.user_id=user.uid;
                }
        },

        components: {
            'my-header': httpVueLoader('/components/my-header.vue'),
            'my-foot': httpVueLoader('/components/my-foot.vue'),
            'my-right': httpVueLoader('/components/my-right.vue'),
        },


    })
</script>
</body>

</html>